<template>
  <view class="page-wrapper">
    <view class="info">
      <view class="logo">
        <cover-image src="@/static/img/logo1@2x.png"></cover-image>
      </view>
      <view class="version">V{{version}}</view>
    </view>
    <view class="item-wrapper">
      <view class="item">
        <view class="title">检查版本</view>
        <view class="setting">最新版本{{version}}<uni-icons type="right" class="u-setting"></uni-icons></view>
      </view>
      <view class="item" @click="onKyzjServiceProtocol">
        <view class="title">服务协议</view>
        <view class="setting"><uni-icons type="right" class="u-setting"></uni-icons></view>
      </view>
    </view>
    <view class="item-wrapper">
      <view class="item" @click="onKyzjPrivacyPolicy">
        <view class="title">隐私政策</view>
        <view class="setting"><uni-icons type="right" class="u-setting"></uni-icons></view>
      </view>
      <view class="item" @click="handleAction">
        <view class="title">卡友之家客服电话</view>
        <view class="setting"><uni-icons type="right" class="u-setting"></uni-icons></view>
      </view>
    </view>
    <u-modal :show="showPhone" title="拨打电话" :showConfirmButton="true" :showCancelButton="true" :content='phone'
      confirmColor="#CF1A1B" @confirm="confirmModal" @cancel="cancelModal"></u-modal>
  </view>
</template>

<script>
  import loginMixin from '@/mixins/login'
  export default {
    mixins: [loginMixin],
    data() {
      return {
        version: '',
        showPhone: false,
        phone: '400-696-5399'
      }
    },
    onLoad(option) {
      const {
        version
      } = option
      if (version && version.length) {
        this.version = version
      }
    },
    methods: {
      // confirmModal() {
      //   uni.makePhoneCall({
      //     phoneNumber: this.phone
      //   })
      //   this.showPhone = false
      // },
      // cancelModal() {
      //   this.showPhone = false
      // },
      handleAction() {
        if (uni.getSystemInfoSync().osName === 'ios') {
          uni.makePhoneCall({
            phoneNumber: this.phone
          })
        } else {
          uni.showModal({
            title: "拨打电话",
            content: this.phone,
            confirmText: "确认",
            cancelText: "取消",
            success: res => {
              if (res.confirm) {
                uni.makePhoneCall({
                  phoneNumber: this.phone
                })
              }
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .info {
    height: 300rpx;
    margin-bottom: 20rpx;
    background-color: #FFFFFF;

    .logo {
      padding: 65rpx;
    }

    .version {
      font-size: 28rpx;
      font-weight: 400;
      color: #F08437;
      text-align: center;
    }
  }

  .item-wrapper {
    height: 184rpx;
    background-color: #FFFFFF;
    margin-bottom: 20rpx;
    padding-left: 32rpx;
    padding-right: 48rpx;
    margin-bottom: 20rpx;

    .item {
      display: flex;
      justify-content: space-between;
      height: 92rpx;
      line-height: 92rpx;

      .title {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }

      .setting {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);

        .u-setting {
          margin-left: 16rpx;
        }
      }
    }

  }

  /deep/ .u-modal__content {
    text-align: center;
    padding-top: 20rpx;
  }
</style>